<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row" style="height:15px">
      <!-- <breadcrumb /> -->
      <div class="rightTwo">
        <p @click="toPage"><i class="el-icon-s-grid" />时间轴</p>
        <p @click="toGo"> 转出</p>
        <p @click="showDeleteModal"> 删除</p>
      </div>
    </div>
    <!-- <el-divider /> -->
    <div class="overview-content">
      <!-- <scr-list />
      <list-table /> -->
      <el-row :gutter="32">
        <el-col :xs="14" :sm="14" :lg="14" style="margin-bottom:20px;" class="bgfff">
          <div class="chart-wrapper">
            <ul class="ulOne">
              <li>
                <p>
                  <span class=""><img width="42" src="../../assets/fc.png"> </span>
                  <span class="spanone" show-overflow-tooltip>
                    <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content="objHtml.address" placement="top">
                      <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc',1)" @mouseout="out">
                        <span :ref="'utc'" class="a">{{ objHtml && objHtml.address }}</span>
                      </div>
                    </el-tooltip>
                    <i><span>{{ houseTypeFormat2(objHtml.type) }}</span> - {{ objHtml.roomNumber }}房间／{{ objHtml.wcNumber }}卫浴／{{ objHtml.carRoomNumber }}车位{{ objHtml.carRoomCode }}／{{ objHtml.storageRoomNumber }}储藏室{{ objHtml.storageRoomCode }}</i>
                  </span>
                </p>
                <a @click="goEdit"><i class="el-icon-edit-outline" style="font-size: 26px" /></a>
              </li>
            </ul>
            <ol class="olOne">
              <li>
                <i>交割时间</i>
                <span>{{ objHtml.deliveryDate? objHtml.deliveryDate:'-' }}</span>
              </li>
              <li>
                <i>建筑价格</i>
                <span>${{ objHtml.architecturePrice?objHtml.architecturePrice:'-' }}</span>
              </li>
              <li>
                <i>土地价格</i>
                <span>${{ objHtml.landPrice ? objHtml.landPrice:'-' }}</span>
              </li>
              <li>
                <i>房产来源</i>
                <span>{{ houseSourceFormat(objHtml.houseSource) || '-' }}</span>
              </li>
              <li>
                <i>土地面积</i>
                <span>{{ objHtml.landMeasure }}<em>{{ measureTypeFormat2(objHtml.measureType) }}</em></span>
              </li>
              <li>
                <i>房屋面积</i>
                <span>{{ objHtml.houseMeasure }}<em>{{ measureTypeFormat2(objHtml.measureType) }}</em></span>
              </li>
              <li>
                <i>账单日</i>
                <span>{{ objHtml.billDate?billDateFormat(objHtml.billDate):'-' }}</span>
              </li>
              <li>
                <i>状态</i>
                <em v-if="objHtml.status != 4" class="emBig">{{ houseStatusFormat2(objHtml.status) }}</em>
                <em v-if="objHtml.status == 4" class="emBig red">已转出</em>
              </li>
              <li>
                <i>出租费</i>
                <em class="emSall"> {{ objHtml.rentPrice?objHtml.rentPrice:'-' }}</em>
              </li>
              <li>
                <i>广告费</i>
                <em class="emSall"> {{ objHtml.adPrice?objHtml.adPrice:'-' }}</em>
              </li>
              <li>
                <i>管理费</i>
                <em class="emSall"> {{ objHtml.managePrice?objHtml.managePrice:'-' }}</em>
              </li>
              <li>
                <i>续约费</i>
                <em class="emSall">{{ objHtml.reRentPrice?objHtml.reRentPrice:'-' }}</em>
              </li>
              <li>
                <i>收款人</i>
                <em class="emSallc">{{ objHtml.payeeName?objHtml.payeeName:'-' }}</em>
              </li>
              <li>
                <i>收款银行</i>
                <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content="objHtml.bankName?objHtml.bankName:'-'" placement="top">
                  <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc1',1)" @mouseout="out">
                    <em :ref="'utc1'" class="emSallc">{{ objHtml.bankName?objHtml.bankName:'-' }}</em>
                  </div>
                </el-tooltip>
                <!-- <em class="emSallc">{{ objHtml.bankName?objHtml.bankName:'-' }}</em> -->
              </li>
              <li>
                <i>收款账号</i>
                <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content="objHtml.bankAccount?objHtml.bankAccount:'-'" placement="top">
                  <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc2',1)" @mouseout="out">
                    <em :ref="'utc2'" class="emSallc">{{ objHtml.bankAccount?objHtml.bankAccount:'-' }}</em>
                  </div>
                </el-tooltip>
                <!-- <em class="emSallc">{{ objHtml.bankAccount?objHtml.bankAccount:'-' }}</em> -->
              </li>
              <li>
                <i>BSB/SWIFT CODE</i>
                <!-- <em class="emSallc">{{ objHtml.bankBsbCode?objHtml.bankBsbCode:'-' }}</em> -->
                <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content="objHtml.bankBsbCode?objHtml.bankBsbCode:'-'" placement="top">
                  <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc3',1)" @mouseout="out">
                    <em :ref="'utc3'" class="emSallc">{{ objHtml.bankBsbCode?objHtml.bankBsbCode:'-' }}</em>
                  </div>
                </el-tooltip>
              </li>
            </ol>
            <div class="imgAll">
              <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
                <span>房源图片:</span>
                <viewer v-if="layoutImageList.length>0" :images="layoutImageList">
                  <el-col v-for="(image,index) in layoutImageList" :key="index" :xs="4" :sm="4" :lg="3" class="colli">
                    <!-- <el-image :src="image" class="imgW" /> -->
                    <img
                      :key="index"
                      class="imgW"
                      :src="image"
                      :onerror="errorImg"
                    >
                    <i>户型图</i>
                  </el-col>
                </viewer>
                <viewer :images="objHtml.mainImage.split()">
                  <el-col v-if="objHtml.mainImage" :xs="4" :sm="4" :lg="3" class="colli">
                    <!-- <el-image :src="objHtml.mainImage" class="imgW" /> -->
                    <img
                      :key="index"
                      class="imgW"
                      :src="objHtml.mainImage"
                      :onerror="errorImg"
                    >
                    <i>主图</i>
                  </el-col>
                </viewer>
                <viewer v-if="imageList !='' && imageList.length>=1" :images="imageList">
                  <el-col v-for="(image,index) in imageList" :key="index" :xs="4" :sm="4" :lg="3" class="colli">
                    <img
                      :key="index"
                      class="imgW"
                      :src="image"
                      :onerror="errorImg"
                    >
                    <i>详情图</i>
                  </el-col>
                </viewer>
              </el-col>
            </div>
          </div>
        </el-col>
        <el-col :xs="10" :sm="10" :lg="10" style="margin-bottom:20px;">
          <div class="chart-wrapper">
            <div class="twoFlex">
              <div>
                <ul class="ulTwo">
                  <li>
                    <p>
                      <span class=""><img width="42" src="../../assets/yz.png"></span>
                      <span class="spanone">
                        <em>业主及管理人员</em>
                      </span>
                    </p>
                    <p @click="toGoPage"><i class="el-icon-edit-outline" /></p>
                  </li>
                </ul>
                <div class="divPad">
                  <ol class="olTwo olTwoJus">
                    <li @click="openYZ(houseOwner.houseOwner1.id)">
                      <i>业主1</i>
                      <em class="emSall">{{ (houseOwner&&houseOwner.houseOwner1)?houseOwner.houseOwner1.name:'-' }}</em>
                    </li>
                    <li :hidden="houseOwner==null||houseOwner.houseOwner2==null" @click="openYZ(houseOwner.houseOwner2.id)">
                      <i>业主2</i>
                      <em class="emSall">{{ (houseOwner&&houseOwner.houseOwner2)?houseOwner.houseOwner2.name:'-' }}</em>
                    </li>
                    <li :hidden="houseOwner==null||houseOwner.houseOwner3==null" @click="openYZ(houseOwner.houseOwner3.id)">
                      <i>业主3</i>
                      <em class="emSall">{{ (houseOwner&&houseOwner.houseOwner3)?houseOwner.houseOwner3.name:'-' }}</em>
                    </li>
                    <li :hidden="houseOwner==null||houseOwner.houseOwner4==null" @click="openYZ(houseOwner.houseOwner4.id)">
                      <i>业主4</i>
                      <em class="emSall">{{ (houseOwner&&houseOwner.houseOwner4)?houseOwner.houseOwner4.name:'-' }}</em>
                    </li>
                  </ol>
                  <ol class="olTwo">
                    <li>
                      <i>运营</i>
                      <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content=" (houseOwner&&houseOwner.houseOperator)?houseOwner.houseOperator.name:'-'" placement="top">
                        <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc7',1)" @mouseout="out">
                          <em :ref="'utc7'" class="emSall">{{ (houseOwner&&houseOwner.houseOperator)?houseOwner.houseOperator.name:'-' }}</em>
                        </div>
                      </el-tooltip>
                      <!-- <em class="emSall">{{ (houseOwner&&houseOwner.houseOperator)?houseOwner.houseOperator.name:'-' }}</em> -->
                    </li>
                    <li>
                      <i>BD</i>
                      <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content=" (houseOwner&&houseOwner.houseBD)?houseOwner.houseBD.name:'-'" placement="top">
                        <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc6',1)" @mouseout="out">
                          <em :ref="'utc6'" class="emSall">{{ (houseOwner&&houseOwner.houseBD)?houseOwner.houseBD.name:'-' }}</em>
                        </div>
                      </el-tooltip>
                      <!-- <em class="emSall">{{ (houseOwner&&houseOwner.houseBD)?houseOwner.houseBD.name:'-' }} </em> -->
                    </li>
                    <li>
                      <i>物业经理</i>
                      <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content=" (houseOwner&&houseOwner.houseProperty)?houseOwner.houseProperty.name:'-'" placement="top">
                        <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc4',1)" @mouseout="out">
                          <em :ref="'utc4'" class="emSall">{{ (houseOwner&&houseOwner.houseProperty)?houseOwner.houseProperty.name:'-' }}</em>
                        </div>
                      </el-tooltip>
                      <!-- <em class="emSall"> {{ (houseOwner&&houseOwner.houseProperty)?houseOwner.houseProperty.name:'-' }}</em> -->
                    </li>
                    <li>
                      <i>销售经理</i>
                      <el-tooltip effect="dark" :disabled="isDisabledTooltip" :content=" (houseOwner&&houseOwner.houseSalesman)?houseOwner.houseSalesman.name:'-'" placement="top">
                        <div :class="['ellipsisDiv','utc']" @mouseover="onMouseOver('utc5',1)" @mouseout="out">
                          <em :ref="'utc5'" class="emSall">{{ (houseOwner&&houseOwner.houseSalesman)?houseOwner.houseSalesman.name:'-' }}</em>
                        </div>
                      </el-tooltip>
                      <!-- <em class="emSall">{{ (houseOwner&&houseOwner.houseSalesman)?houseOwner.houseSalesman.name:'-' }}</em> -->
                    </li>
                  </ol>
                </div>
              </div>
              <div>
                <ul class="ulTwo">
                  <li>
                    <p>
                      <span class=""><img width="42" src="../../assets/kckzh.png"></span>
                      <span class="spanone">
                        <em>可查看该房产账号</em>
                      </span>
                    </p>
                    <p @click="toGoPageSee"><i class="el-icon-edit-outline" /></p>
                  </li>
                </ul>
                <div class="divThree">
                  <ol class="olThree">
                    <li v-for="(item,index) in houseViewList" :key="index">
                      <el-tooltip class="item" effect="dark" :disabled="isDisabledTooltip" :content="item.mobile + ((item.name || item.nickname)?'/':'') + ((item.name || item.nickname)?(item.name || item.nickname):'')" placement="top-start">
                        <div :class="['ellipsisDiv','t'+index]" @mouseover="onMouseOver('t'+index)">
                          <span :ref="'t'+index"> {{ item.mobile }} {{ (item.name || item.nickname)?'/':'' }} {{ item.name || item.nickname }}</span>
                        </div>
                      </el-tooltip>
                    </li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;" class="padLeft">
          <div class="chart-wrapper">
            <div class="title">
              <ul v-if="selectedTagList.length>0">
                <li v-for="(tag,index) in selectedTagList" :key="index">{{ tag }}</li>
              </ul>
              <div v-else style="color: #2d2f33;font-size: 12px">请编辑标签</div>
              <p @click="toGoTag"><i class="el-icon-edit-outline" /></p>
            </div>
          </div>
          <my-tab :houseid="id" />

        </el-col>
      </el-row>
      <myModal :obj="deleteobj" @close="close" @save="deleteHouse">
        <div class="mpdalBody">
          <span>确定要删除该房产吗？</span>
        </div>
      </myModal>
      <myModal :obj="obj" @close="close" @save="saveReason">
        <div class="mpdalBody">
          <el-form ref="form" :model="sizeForm" label-width="85px" class="formDiv">
            <el-form-item label="转出理由:" :required="true" :span="24">
              <el-select v-model="value" placeholder="请选择转出理由" class="btnScr" :span="24" @change="valueTg">
                <!-- {{ item }} -->
                <el-option
                  v-for="item in reasonList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </myModal>
      <myModal :obj="objTwo" @close="close" @save="saveOwner">
        <div class="mpdalBody">
          <el-form ref="form" :model="ownerForm" label-width="85px" class="formDiv">
            <el-form-item label="业主1:" :span="24">
              <el-select v-model="ownerForm.ownerFirst" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in ownerList"
                  :key="item.id"
                  :label="item.name+' '+item.idCard"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="业主2:" :span="24">
              <el-select v-model="ownerForm.ownerSecond" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in ownerList"
                  :key="item.id"
                  :label="item.name+' '+item.idCard"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="业主3:" :span="24">
              <el-select v-model="ownerForm.ownerThree" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in ownerList"
                  :key="item.id"
                  :label="item.name+' '+item.idCard"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="业主4:" :span="24">
              <el-select v-model="ownerForm.ownerFour" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in ownerList"
                  :key="item.id"
                  :label="item.name+' '+item.idCard"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="运营:" :span="24">
              <el-select v-model="ownerForm.operator" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in operatorManList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="BD:" :span="24">
              <el-select v-model="ownerForm.bd" filterable clearable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in BDList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="物业经理:" :span="24">
              <el-select v-model="ownerForm.propertyManager" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in propertyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="销售经理:" :span="24">
              <el-select v-model="ownerForm.saleManager" clearable filterable placeholder="请选择" class="btnScr" :span="24">
                <el-option
                  v-for="item in salesManList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </myModal>
      <myModal :obj="objThree" @close="close" @save="saveHouseView">
        <div class="mpdalBody">
          <el-form ref="form" :model="sizeForm" label-width="" class="formDiv">
            <el-form-item label="" :span="24">
              <el-select filterable placeholder="请用户手机号" class="btnScr" :span="24" @change="selectHouseView">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="(item.name==null||item.name==''?item.nickname==null||item.nickname==''?'':item.nickname:item.name) + ' '+item.mobile"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div class="tags-view-wrapper">
              <router-link
                v-for="item in houseViewList"
                ref="tag"
                :key="item.id"
                tag="span"
                to=""
                class="tags-view-item"
              >
                {{ item.mobile }} / {{ (item.name==null||item.name==''?item.nickname==null||item.nickname==''?'':item.nickname:item.name) }}
                <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(item)" />
              </router-link>
            </div>
          </el-form>
        </div>
      </myModal>
      <myModal :obj="objFour" @close="close" @save="save">
        <div class="mpdalBody">
          <ul class="ulFive">
            <li
              v-for="(item,index) in tagList"
              :key="index"
              :class="{'active':item.active}"
              @click="liActive(item,index)"
            >{{ item.name }}<i v-if="item.active" class="el-icon-check susse" /></li>
          </ul>
        </div>
      </myModal>
    </div>
    <!---->
    <!---->
    <el-dialog title="" width="80%" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show">
      <h2>编辑房产信息<i class="el-icon-close" @click="close(false)" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form ref="postForm" :model="postForm" :rules="rules" label-width="85px" class="formDiv">
          <el-form-item label="房产地址:" :required="true">
            <el-row :xs="24" :sm="24" :lg="24">
              <el-col :xs="4" :sm="4" :lg="3" class="mtright">
                <el-select v-model="postForm.country" value-key="name" placeholder="请选择国家" @change="getRemoteStateList">
                  <el-option
                    v-for="item in countryListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :xs="4" :sm="4" :lg="3" class="mtright">
                <el-select v-model="postForm.state" value-key="name" placeholder="请选择省/州" @change="getRemoteCountyList">
                  <el-option
                    v-for="item in stateListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :xs="4" :sm="4" :lg="3" class="mtright">
                <el-select v-model="postForm.county" value-key="name" placeholder="请选择区" @change="countySlected">
                  <el-option
                    v-for="item in countyListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :xs="4" :sm="4" :lg="4" class="mtright">
                <el-input v-model="postForm.projectName" placeholder="项目名称(选填)" />
              </el-col>
              <el-col :xs="8" :sm="8" :lg="10" class="mtright">
                <el-form-item prop="address">
                  <el-input v-model="postForm.address" placeholder="请输入完整地址" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="5" :sm="5" :lg="5" class="mtright">
              <el-form-item label="房产类型:">
                <el-select v-model="postForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in houseTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3" class="mtright">
              <el-form-item label="房间:" label-width="44px" class="" prop="roomNumber">
                <el-input v-model="postForm.roomNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入数量" />
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3" class="mtright">
              <el-form-item label="卫浴:" label-width="44px" class="" prop="wcNumber">
                <el-input v-model="postForm.wcNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入数量" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="mtright">
              <el-form-item label="车库:" label-width="44px" class="" prop="carRoomNumber">
                <el-col :xs="11" :sm="11" :lg="11" class="mtright">
                  <el-input v-model="postForm.carRoomNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入数量" />
                </el-col>
                <el-col :xs="11" :sm="11" :lg="11" class="">
                  <el-input v-model="postForm.carRoomCode" placeholder="请输入" />
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="mtright">
              <el-form-item label="储藏室:" label-width="58px" prop="storageRoomNumber">
                <el-col :xs="11" :sm="11" :lg="11" class="mtright">
                  <el-input v-model="postForm.storageRoomNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入数量" />
                </el-col>
                <el-col :xs="11" :sm="11" :lg="11" class="">
                  <el-input v-model="postForm.storageRoomCode" placeholder="请输入" class="" />
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24" style="display:flex">
            <!-- <el-col  class=""> -->
            <!-- <el-form-item label="房产图片:" label-width="80px" class="">
              <Upload v-model="postForm.layoutImage" :file-list="listImgHx" :urls="postForm.layoutImage" :maxcount="2" title="户型图" format="png,jpg,jpeg" @getImage="changePoster" />
            </el-form-item> -->
            <!-- </el-col> -->
            <!-- <el-col  class=""> -->
            <el-form-item label="房产图片:" label-width="80px" class="">
              <Uploadmut v-model="postForm.layoutImage" :file-list="listImgHx" :urls="postForm.layoutImage" :maxcount="2" title="户型图" format="png,jpg,jpeg" @getImage="changePoster" />
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col  class=""> -->
            <el-form-item label-width="0" class="right20">
              <Upload v-model="postForm.mainImage" :file-list="listImgZt" :urls="postForm.mainImage" :maxcount="1" title="主图" format="png,jpg,jpeg" @getImage="changeMainImage" />
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col  class="right20"> -->
            <el-form-item label-width="0" class="right20">
              <Upload v-model="postForm.detailImage" :file-list="listImgXq" :urls="postForm.detailImage" :maxcount="5" title="详情图（最多5张）" format="png,jpg,jpeg" @getImage="changeDetailImage" />
            </el-form-item>
            <!-- </el-col> -->
            <!---->
          </el-row>
          <!---->
          <el-row :xs="24" :sm="24" :lg="24" class="borbtoonline">
            <el-form-item label="其他信息:" label-width="80px" class="">
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="交割时间:" label-width="80px" class="itxt">
                  <el-date-picker v-model="postForm.deliveryDate" value-format="yyyy/MM/dd" type="date" placeholder="选择日期" style="width: 100%;" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="建筑价格:" label-width="80px" class="itxt" prop="architecturePrice">
                  <el-input v-model="postForm.architecturePrice" prefix-icon="fa fa-usd" placeholder="可输入建筑价格" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="土地价格:" label-width="80px" class="itxt" prop="landPrice">
                  <el-input v-model="postForm.landPrice" prefix-icon="fa fa-usd" placeholder="可输入土地价格" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="账单日:" label-width="80px" class="itxt itxtactive">
                  <el-date-picker v-model="postForm.billDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="面积单位:" label-width="80px" class="itxt">
                  <el-select v-model="postForm.measureType" placeholder="请选择面积单位">
                    <el-option
                      v-for="item in measureTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="土地面积:" label-width="80px" class="itxt" prop="landMeasure">
                  <el-input v-model="postForm.landMeasure" placeholder="请输入土地面积" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="房屋面积:" label-width="80px" class="itxt" prop="houseMeasure">
                  <el-input v-model="postForm.houseMeasure" placeholder="请输入房屋面积" class="" />
                </el-form-item>
              </el-col>
              <!--              <el-col :xs="6" :sm="6" :lg="6" class="">-->
              <!--                <el-form-item label="房产价格:" label-width="80px" class="itxt itxtactive">-->
              <!--                  <el-input v-model="postForm.totalPrice" placeholder="" class="" />-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
            </el-form-item>
          </el-row>
          <!---->
          <!---->
          <el-row :xs="24" :sm="24" :lg="24" class="bortopline">
            <el-form-item label="财务信息:" label-width="80px" class="">
              <el-col :xs="8" :sm="8" :lg="8" class="">
                <el-form-item label="收款人姓名:" label-width="90px" class="itxt">
                  <el-input v-model="postForm.payeeName" placeholder="请输入收款人姓名" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8" class="100px">
                <el-form-item label="收款银行:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.bankName" placeholder="请输入收款银行" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8" class="">
                <el-form-item label="收款账号:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.bankAccount" placeholder="请输入收款账号" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="10" :sm="10" :lg="10" class="">
                <el-form-item label="BSB/SWIFT CODE:" label-width="130px" class="itxt">
                  <el-input v-model="postForm.bankBsbCode" placeholder="请输入BSB/SWIFT CODE" class="" />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-row>

          <!---->
          <el-row :xs="24" :sm="24" :lg="24" class="borbtoonline">
            <el-form-item label="其他信息:" label-width="80px" class="">
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="出租费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.rentPrice"  placeholder="请输入出租费" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="广告费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.adPrice"  placeholder="请输入广告费" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="管理费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.managePrice"  placeholder="请输入管理费" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="续租费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.reRentPrice"  placeholder="请输入续租费" class="" />
                </el-form-item>
              </el-col>

            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button class="grey-btn" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
    <!---->
  </div>
</template>

<script>
import myModal from '@/components/Modal'
import myTab from './components/tab'
import { pageDetail, updateTag, update, add, removeHouse, gettransferOut } from '@/api/house'
import { list } from '@/api/area'
import { listByRole } from '@/api/manager'
import { listByMobile } from '@/api/owner'
import { getHouseOwnerByHouseId, addHouseOwner } from '@/api/houseOwner'
import { getHouseViewListByHouseId, batchAdd } from '@/api/houseView'
import { getTagList } from '@/api/tag'
import { houseTypeFormat2, houseStatusFormat2, measureTypeFormat2, billDateFormat, houseSourceFormat } from '@/utils/common'
import Upload from '@/components/Upload/SingleImage'
import Uploadmut from '@/components/Upload/SingleImageMut'
import {
  houseTypeOptions,
  houseStatusOptions,
  houseSourceOptions,
  roomNumOptions,
  measureTypeOptions,
  reasonList
} from '@/utils/consts'
export default {
  name: 'PagePermission',
  components: { myTab, myModal, Upload, Uploadmut },
  data() {
    // const blurText = async(rule, value, callback) => {
    //   const boolean = new RegExp('^[1-9][0-9]*$').test(value)
    //   if (!boolean) {
    //     // this.$message.warning('请输入正整数')
    //     callback('请输入正整数')
    //   }
    // }
    return {
      isDisabledTooltip: true,
      id: undefined,
      listImgHx: [],
      listImgXq: [],
      listImgZt: [],
      houseOwner: {},
      houseViewList: [],
      ownerList: [],
      reasonList,
      BDList: [],
      propertyList: [],
      salesManList: [],
      operatorManList: [],
      objHtml: {},
      imageList: [],
      layoutImageList: [],
      selectedTagList: [],
      tagList: [],
      stateListOptions: [],
      indexList: [],
      countryListOptions: [],
      countyListOptions: [],
      selectedCountry: {},
      selectedCounty: {},
      show: false,
      rules: {
        title: [{ required: true, message: '名称必填', trigger: 'change' }],
        subtitle: [{ required: true, message: '描述必填', trigger: 'change' }],
        content: [{ required: true, message: '详情必填', trigger: 'change' }],
        poster: [{ required: true, message: '请上传封面图', trigger: 'change' }],
        address: [{ required: true, message: '详细地址必填', trigger: 'change' }],

        roomNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        wcNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        carRoomNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        storageRoomNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],

        architecturePrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        reRentPrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        managePrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        adPrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        rentPrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        houseMeasure: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        landMeasure: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        landPrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }]
      },
      ownerForm: {
        ownerFirst: '',
        ownerSecond: '',
        ownerThree: '',
        ownerFour: '',
        bd: '',
        operator: '',
        propertyManager: '',
        saleManager: ''
      },
      value: '',
      selectedState: {},
      userList: [],
      sizeForm: {},
      obj: {
        show: false,
        title: '请选择转出理由',
        width: '515px'
      },
      deleteobj: {
        show: false,
        title: '删除房产',
        width: '515px'
      },
      objTwo: {
        show: false,
        title: '业主及管理人员',
        width: '515px'
      },
      objThree: {
        show: false,
        title: '可查看该房产账号',
        width: '615px'
      },
      objFour: {
        show: false,
        title: '你可为该房产打上标签',
        width: '515px'
      },
      houseTypeFormat2,
      houseStatusFormat2,
      measureTypeFormat2,
      houseSourceFormat,
      billDateFormat,
      postForm: {
        address: ''
      },
      houseTypeOptions,
      houseStatusOptions,
      houseSourceOptions,
      roomNumOptions,
      measureTypeOptions
    }
  },
  computed: {
    listenStoreMsg() {
      return this.$store.state.user.msg
    }
  },
  watch: {
    listenStoreMsg() {
      pageDetail(this.$route.query.id).then(response => {
        this.objHtml = response.data
        if (this.objHtml.detailImage !== null) {
          this.imageList = this.objHtml.detailImage.split(',')
        }
        if (this.objHtml.layoutImage !== null) {
          this.layoutImageList = this.objHtml.layoutImage.split(',')
          console.log('this.layoutImageList[this.layoutImageList.length - 1] === ""', this.layoutImageList[this.layoutImageList.length - 1] === '')
          if (this.layoutImageList[this.layoutImageList.length - 1] === '') {
            console.log('this.layoutImageList', this.layoutImageList)
            this.layoutImageList.splice(this.layoutImageList.length - 1, 1)
            console.log('this.layoutImageList', this.layoutImageList)
          }
        }
        if (this.objHtml.tag != null && this.objHtml.tag.length > 0) {
          this.selectedTagList = this.objHtml.tag.split(',')
        }

        this.indexList = this.selectedTagList
      })
    }
  },
  created() {
    if (this.$route.query.id === '' || this.$route.query.id === undefined || !this.$route.query.id) {
      setTimeout(() => {
        this.$router.push('/house/page')
      }, 2000)

      return
    }
    this.id = this.$route.query.id
    this.init(this.id)
    this.getOwner()
  },
  methods: {
    openYZ(id) {
      this.$router.push({ path: '/manager/ownerShow', query: { id: id }})
    },
    valueTg(val) {
      this.value = val
    },
    submitForm() {
      if (this.postForm.country === '') {
        this.$notify({
          title: '提示',
          message: '请填写必填项',
          type: 'error',
          duration: 2000
        })
        return
      }
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.postForm.id !== undefined) {
            update(this.postForm).then(() => {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.show = false
              this.init(this.id)
              //   this.$router.go(0)
              //   this.$router.push({ path: 'pageDetail', query: { id: this.postForm.id }})
            })
          } else {
            add(this.postForm).then(() => {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            //  this.$router.go(0)
              //  this.$router.push({ path: 'pageDetail', query: { id: this.postForm.id }})
            })
          }
          //  this.reload()
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    countySlected(data) {
      console.log(data)
      this.postForm.county = data.name
      list(data.code).then(response => {
        if (!response.data) return
        this.countyListOptions = response.data
        if (!this.isEdit && this.postForm.country === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
    },
    getRemoteStateList(data) {
      console.log(data)
      this.postForm.country = data.name
      this.postForm.state = null
      this.postForm.county = null
      list(data.id).then(response => {
        console.log(response, 99999)
        if (!response.data) return
        this.stateListOptions = response.data
        if (!this.isEdit && this.postForm.country === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
    },
    getRemoteAreaList(code) {
      list(code).then(response => {
        if (!response.data) return
        this.countryListOptions = response.data
        if (!this.isEdit && this.postForm.country === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
    },
    getRemoteCountyList(data) {
      console.log(data)
      this.postForm.state = data.name
      this.postForm.county = null
      list(data.id).then(response => {
        if (!response.data) return
        this.countyListOptions = response.data
        if (!this.isEdit && this.postForm.country === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
    },
    out() {
      this.isDisabledTooltip = true
    },
    onMouseOver(str, val) {
      if (val === 1) {
        const parentWidth = this.$refs[str].parentNode.offsetWidth
        const contentWidth = this.$refs[str].offsetWidth
        this.isDisabledTooltip = contentWidth <= parentWidth
        return
      }
      const parentWidth = this.$refs[str][0].parentNode.offsetWidth
      const contentWidth = this.$refs[str][0].offsetWidth
      this.isDisabledTooltip = contentWidth <= parentWidth
    },
    changePoster(val) {
      console.log('val:' + val)
      this.postForm.layoutImage = val.toString()
    },
    changeMainImage(val) {
      console.log('val:' + val)
      this.postForm.mainImage = val.toString()
    },
    changeDetailImage(val) {
      console.log('val:' + val)
      this.postForm.detailImage = val.toString()
    },
    goEdit() {
      console.log(this.id)
      console.log(this.objHtml)
      this.getRemoteAreaList('0')
      this.show = true
      this.postForm = Object.assign({}, this.objHtml)// this.objHtml
      // this.postForm.selectedCountry.name = this.objHtml.country
      // this.postForm.selectedState.name = this.objHtml.state
      // this.postForm.selectedCounty.name = this.objHtml.county
    },
    init(id) {
      pageDetail(id).then(response => {
        if (!response.data) {
          this.$notify({
            title: '提示',
            message: '房产已删除',
            type: 'error',
            duration: 2000
          })
          setTimeout(() => {
            this.$router.push('/house/page')
          }, 2000)
          return
        }
        console.log(response)
        this.objHtml = response.data
        if (this.objHtml.detailImage !== undefined) {
          this.imageList = this.objHtml.detailImage.split(',')
        }
        if (this.objHtml.layoutImage !== undefined) {
          this.layoutImageList = this.objHtml.layoutImage.split(',')
          console.log('this.layoutImageList[this.layoutImageList.length - 1] === ""', this.layoutImageList[this.layoutImageList.length - 1] === '')
          if (this.layoutImageList[this.layoutImageList.length - 1] === '') {
            console.log('this.layoutImageList', this.layoutImageList)
            this.layoutImageList.splice(this.layoutImageList.length - 1, 1)
            console.log('this.layoutImageList', this.layoutImageList)
          }
        }
        if (this.objHtml.tag != null && this.objHtml.tag.length > 0) {
          this.selectedTagList = this.objHtml.tag.split(',')
        }

        this.indexList = this.selectedTagList
      })

      getHouseViewListByHouseId(id).then(response => {
        console.log(response)
        this.houseViewList = response.data
      })
      listByRole(0).then(response => {
        console.log(response)
        this.ownerList = response.data
      })
      listByRole(1).then(response => {
        console.log(response)
        this.BDList = response.data
      })
      listByRole(2).then(response => {
        console.log(response)
        this.operatorManList = response.data
      })
      listByRole(3).then(response => {
        console.log(response)
        this.propertyList = response.data
      })
      listByRole(4).then(response => {
        console.log(response)
        this.salesManList = response.data
      })
      listByMobile().then(response => {
        console.log(response)
        this.userList = response.data
        console.log('1userList:', this.userList)
      })
      getTagList('HOUSE_TAG').then(response => {
        console.log(response)
        const that = this
        this.tagList = response.data
        if (this.tagList !== null) {
          that.tagList.forEach(function(item) {
            if (that.selectedTagList != null) {
              that.selectedTagList.forEach(function(item2) {
                if (item2 === item.name) {
                  item.active = true
                }
              })
            }
          })
        }
      })
    },
    getOwner() {
      const that = this
      console.log('getOwner id:', this.id)
      getHouseOwnerByHouseId(this.id).then(response => {
        console.log('response:', response)
        that.houseOwner = response.data
        if (that.houseOwner != null && that.houseOwner.houseOwner1 !== null) {
          that.ownerForm.ownerFirst = that.houseOwner.houseOwner1.id
        }
        if (that.houseOwner != null && that.houseOwner.houseOwner2 !== null) {
          that.ownerForm.ownerSecond = that.houseOwner.houseOwner2.id
        }
        if (that.houseOwner != null && that.houseOwner.houseOwner3 !== null) {
          that.ownerForm.ownerThree = that.houseOwner.houseOwner3.id
        }
        if (that.houseOwner != null && that.houseOwner.houseOwner4 !== null) {
          that.ownerForm.ownerFour = that.houseOwner.houseOwner4.id
        }
        if (that.houseOwner != null && that.houseOwner.houseBD !== null) {
          that.ownerForm.bd = that.houseOwner.houseBD.id
        }
        if (that.houseOwner != null && that.houseOwner.houseOperator !== null) {
          that.ownerForm.operator = that.houseOwner.houseOperator.id
        }
        if (that.houseOwner != null && that.houseOwner.houseProperty !== null) {
          that.ownerForm.propertyManager = that.houseOwner.houseProperty.id
        }
        if (that.houseOwner != null && that.houseOwner.houseSalesman !== null) {
          that.ownerForm.saleManager = that.houseOwner.houseSalesman.id
        }
      })
    },
    handleRolesChange() {
      this.$router.push({ path: '/permission/index?' + +new Date() })
    },
    toPage(use) {
      this.$router.push({ path: 'pageTime', query: { id: this.id }})
    },
    closeSelectedTag(houseView) {
      const mobile = houseView.mobile
      for (let index = 0; index < this.houseViewList.length; index++) {
        if (this.houseViewList[index].mobile === mobile) {
          this.houseViewList.splice(index, 1)
        }
      }
    },
    toGo() {
      this.value = ''
      this.obj.show = true
    },
    showDeleteModal() {
      this.deleteobj.show = true
    },
    toGoTag() {
      this.objFour.show = true
    },
    close(val) {
      this.obj.show = val
      this.objTwo.show = val
      this.objThree.show = val
      this.objFour.show = val
      this.deleteobj.show = val
      this.show = val
      this.value = ''
      this.ownerForm = {}
      this.getOwner(this.id)
      this.init(this.id)
    },
    save() {
      const that = this
      const data = this.objHtml
      data.tag = this.selectedTagList.join(',')
      updateTag(data).then(response => {
        console.log(response)
        that.close()
      })
    },
    saveOwner() {
      const that = this
      const data = this.ownerForm
      data.houseId = this.objHtml.id
      addHouseOwner(data).then(response => {
        console.log(response)
        this.getOwner(that.id)
        that.close()
      })
    },
    deleteHouse() {
      const that = this
      removeHouse(this.id).then(response => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'error',
          duration: 2000
        })
        setTimeout(() => {
          this.$router.push('/house/page')
        }, 2000)
        this.close()
      })
      that.close()
    },
    saveReason() {
      // todo
      const that = this
      if (this.value === '') {
        this.$notify({
          title: '失败',
          message: '请选择转出',
          type: 'error',
          duration: 2000
        })
        return
      }
      const obj = {
        id: this.id,
        reason: this.value
      }
      gettransferOut(obj).then(response => {
        console.log(response, 999)
        if (response.code === 200) {
          that.close()
        }
      })
    },
    selectHouseView(data) {
      console.log('data:', data)
      let isExist = false
      this.houseViewList.forEach(element => {
        if (element.userId === data.id) {
          isExist = true
        }
      })
      if (!isExist) {
        const houseView = {}
        houseView.houseId = this.objHtml.id
        houseView.userId = data.id
        houseView.mobile = data.mobile
        houseView.name = data.name
        houseView.nickname = data.nickname
        console.log('houseViewList add :', houseView)
        this.houseViewList.push(houseView)
      }
    },
    saveHouseView() {
      const that = this
      if (this.houseViewList == null || this.houseViewList.length === 0) {
        const houseView = {}
        houseView.houseId = this.objHtml.id
        this.houseViewList.push(houseView)
      }
      batchAdd(this.houseViewList).then(response => {
        console.log(response)
        that.close()
        that.getHouseViewListByHouseId(that.id)
      })
    },
    toGoPage() {
      this.objTwo.show = true
    },
    toGoPageSee() {
      this.objThree.show = true
    },
    liActive(itemA, index) {
      const that = this
      if (this.tagList[index].active === true) {
        this.tagList[index].active = false
      } else {
        this.tagList[index].active = true
      }

      this.selectedTagList = []
      this.tagList.forEach(function(item) {
        console.log('item:', item)
        if (item.active === true) {
          that.selectedTagList.push(item.name)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
ul,ol{margin: 0;padding: 0;}
ul li,ol li{list-style: none;}
i,em{font-style: normal;}

.ulOne li p span.spanone span.a {
    font-weight: bold;
    margin-bottom: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%;
  font-size: 20px;
}

.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 0 14px;
  background: #eee;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   left: 0px;
  //   top: 50%;
  //   width: 2px;
  //   height: 37px;
  //   background-color: #5AC6B7;
  //   transform: translateY(-50%);
  // }
}
.olOne li em.red{color: #ff0000!important}
.overview-content{padding: 10px;background: #eee;}
.rightTwo{position: absolute;top: -13px;right: 25px;width: 180px;font-size: 12px;color: #5AC6B7;}
.rightTwo p{display: inline-block;margin-left: 8px;padding-top: 5px;cursor: pointer;}
.rightTwo p:nth-child(1){margin-right: 50px;}
.ulOne{background: #5AC6B7;}
.ulOne li{display: flex;justify-content: space-between;align-items: center;color: #fff;}
.ulOne li p{display: flex;justify-content: flex-start;align-items: center;width: 98%;}
.ulOne li p span.el-icon-s-home{font-size: 42px;}
.ulOne li p span em{font-size: 18px;}
.ulOne li p span i{font-size: 14px;margin-top: 8px;
    display: block;}
.ulOne li p span.spanone{flex: 1;margin-left: 15px;width: 100%;}
.ulOne li p span.spanone em{display: block;font-weight: bold;margin-bottom: 8px;white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%;}
.ulOne li{padding-left: 20px;padding-right: 20px;box-sizing: border-box;}
.ulOne li p i.el-icon-edit-outline{font-size: 26px;}
.colli{color: #b5b5b5;font-size: 13px;text-align: center;padding-left: 0!important;}
.olOne{width: 100%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding-left: 25px;padding-right: 25px;}
.olOne li{width: 24%;margin-top: 5px;font-size: 18px;font-weight: bold;}
.olOne li i{display: block;color: #ddd;font-size: 12px;margin-bottom: 10px;}
div.bgfff{background: #fff;padding: 0!important;height: 452px;max-height: 452px;
// height: 440px;max-height: 440px;
overflow-y:auto;}
.imgAll{margin-top: 15px;padding-left: 10px;overflow: hidden;}
.imgAll span{display: block;color: #000;font-weight: normal;font-size: 12px;margin-bottom: 10px;}
.olOne li em{color: #b5b5b5;}
.olOne li{font-size: 18px;margin-bottom: 10px;align-self: flex-start;font-weight: bold;}
.olOne li em.emSall{color: #5AC6B7;font-size: 18px;font-weight: bold;}
.olOne li em.emBig{color: #5AC6B7;font-size: 18px;font-weight: bold;}
.olOne li em.emSallc{color: #919191;font-size: 18px;font-weight: bold;    word-break: break-all;
    // white-space: normal;
    }
.olOne li span{font-weight: bold;}
.twoFlex{display: flex;flex-direction: column;justify-content: space-between;height: 452px;max-height: 452px;overflow-y:auto;}
.ulTwo{background: #f6f7f9;}
.ulTwo li{display: flex;justify-content: space-between;align-items: center;color: #000;}
.ulTwo li p{display: flex;justify-content: flex-start;align-items: center;cursor: pointer;}
.ulTwo li p span.el-icon-user-solid{font-size: 45px;color: #cecece;}
.ulTwo li p span em{font-size: 18px;}
.ulTwo li p span i{font-size: 13px;}
.ulTwo li p span.spanone{flex: 1;margin-left: 15px;}
.ulTwo li p span.spanone em{display: block;font-weight: normal;color: #101010;}
.ulTwo li{padding-left: 20px;padding-right: 20px;box-sizing: border-box;}
.ulTwo li p i.el-icon-edit-outline{font-size: 24px;color: #cecece;}
.olTwo li em{color: #b5b5b5;}
.olTwo li{font-size: 12px;cursor: pointer;}
.olTwo li em.emSall{color: #5AC6B7;font-size: 18px;font-weight: normal;}
.olTwo li em.emBig{color: #5AC6B7;font-size: 15px;font-weight: bold;}
.olTwo li em.emSallc{color: #919191;font-size: 14px;font-weight: normal;}
.olTwo li span{font-weight: bold;}
.olTwo,.olThree{width: 100%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding-left: 25px;padding-right: 25px;}
.olTwo li{width: 25%;margin-top: 20px;}
.olTwo li i{display: block;color: #b5b5b5;font-size: 12px;margin-bottom: 10px;}
.olTwoJus{justify-content: flex-start;}
.divPad{padding-top: 15px;padding-bottom: 30px;background: #fff;}
.olThree{color: #5AC6B7;font-size: 15px;font-weight: bold;}
.olThree li{width: 32%;text-align: left;    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;}
// .olThree li:nth-child(n+3){text-align: right;}
.olThree::after{
  content: '';
  width: 33.3%;
}
.divThree{background: #fff;padding:15px 0;height: 125px;}
.divThree li{line-height: 30px;font-size: 12px;}
.title{display: flex;justify-content: space-between;align-items: center;background: #fff;padding-left: 25px;padding-right: 20px;}
.title ul{display: flex;justify-content: flex-start;flex-wrap: wrap;padding-top: 8px;}
.title li{border: 1px solid #5AC6B7;background: #5AC6B7; color: #fff;min-width: 60px; margin-bottom: 8px; font-size: 12px;padding: 5px 10px;border-radius: 35px;margin-right: 10px;font-family: 'Roboto';}
.padLeft{padding-left: 0!important;}
.title i{font-size: 26px;color: #868686;cursor: pointer;}

.imgW{
  max-width:100%;
   max-height:100%;
   display: block;
   margin-bottom: 4px;
   width: 75px;
   height: 56px;
   margin-left: auto;
   margin-right: auto;
   }

.imgW image{
  border-radius: 5px;
}
.el-image{
  border-radius: 5px;
}

.mpdalBody{padding-left: 39px;padding-right: 39px;padding-top: 15px;padding-bottom: 15px;}
.btnScr{width: 100%;}
.ulFour{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.ulFour li{width: 33.3%;box-sizing: border-box;margin-bottom: 10px;}
.ulFour li em{position: relative;}
.ulFour li i{position: absolute;right: -8px;top: -4px;color: #ff0000;border-radius: 50%;width: 12px;height: 12px;line-height: 10px;text-align: center;border: 1px solid #ff0000;display: block;font-size: 12px;}
.list li:nth-child(1n){text-align: left;}
.list li:nth-child(2n){text-align: center;}
.list li:nth-child(3n+1){text-align: right;}
.ulFive{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.ulFive li{width: 32%;cursor: pointer; color: #d9d9d9;padding: 4px 8px;border: 1px solid #d9d9d9;border-radius: 35px;margin-bottom: 15px;font-size: 12px;text-align: center;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 23px;}
.ulFive li.active{color: #808080;border: 1px solid #5AC6B7;border-radius: 35px;}
.susse{color: #5AC6B7;}

.mtright{
    margin-right: 5px;
}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}

.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;padding-top: 0;
    margin-top: 0;overflow: hidden;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}

.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.flex{display: flex;justify-content: space-between;align-items: center;padding-right: 8px!important;}
.btnScr{width: 100%;}
::v-deep .btnScr input{border-radius:2px;}
.btnScrright{border-radius:2px;margin-top: -15px;}
.agg{padding-left:8px!important;padding-right: 8px!important;}

.borbtoonline{border-bottom: 1px solid #f2f2f2;padding-bottom: -15px;}
.bortopline{margin-top: 15px;}
.borbtoonline .el-form-item{margin-bottom: 0px;}
.formDiv{padding-left: 39px;padding-right: 39px;overflow: hidden;}
 ::v-deep .el-upload-list__item-thumbnail{width: 100%;padding-right: 0px;max-width: 70px;max-height: 56px;}
 .mtright  ::v-deep  .el-form-item__label{padding: 0 10px 0 0;}

 ::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7;}
::v-deep  .el-upload--picture-card{width: 70px!important;height: 56px;line-height: 66px;vertical-align: sub;}
::v-deep .el-upload__text{line-height: initial;color: #cacaca;margin-top: -10px;font-size: 12px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item{width: 70px;height: 56px;}
::v-deep .upload-demo{width: 384px;}
.borbtoonline .el-form-item{
    margin-bottom: 17px;
}
</style>

<style>
@media (min-width:1200px) {
        .inputTop input::-webkit-input-placeholder, textarea::-webkit-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-moz-placeholder, textarea:-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input::-moz-placeholder, textarea::-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-ms-input-placeholder, textarea:-ms-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }
}
</style>

<style lang="scss" scoped>

    .tags-view-wrapper {
      .tags-view-item {
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        border: 1px solid #d8dce5;
        color: #495060;
        background: #fff;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
        margin-top: 4px;
        &.active {
          background-color: #42b983;
          color: #fff;
          border-color: #42b983;
          &::before {
            content: '';
            background: #fff;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: relative;
            margin-right: 2px;
          }
        }
      }
    }
    .contextmenu {
      margin: 0;
      background: #fff;
      z-index: 3000;
      position: absolute;
      list-style-type: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #333;
      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
      li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;
        &:hover {
          background: #eee;
        }
      }
    }

</style>
<style lang="scss">

  //reset element css of el-icon-close
  .tags-view-wrapper {
    .tags-view-item {
      .el-icon-close {
        width: 16px;
        height: 16px;
        vertical-align: 2px;
        border-radius: 50%;
        text-align: center;
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transform-origin: 100% 50%;
        &:before {
          transform: scale(.6);
          display: inline-block;
          vertical-align: -3px;
        }
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
  }

  .addBTn{width: 107px;height: 44px;}
@media screen and (max-width: 1520px) {
     .mtright{margin-right: 8px;}
}
@media screen and (max-width: 1370px) {
     .mtright{margin-right: 6px;}
}
@media screen and (max-width: 1200px) {
     .mtright{margin-right: 0px;}
}
.bortopline{margin-top: 30px;}
.borbtoonline .el-form-item{margin-bottom: 15px;}
.formDiv{padding-left: 39px;padding-right: 39px;}
 ::v-deep .el-upload-list__item-thumbnail{width: 100%;padding-right: 0px;max-width: 70px;max-height: 56px;}
 .mtright  ::v-deep  .el-form-item__label{padding: 0 10px 0 0;font-size: 12px;color: #101010;font-weight: normal;}
 .endRight .mtright:last-child{margin-right: 0;}
.digoDiv ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    text-indent: 5px;
}
.mapDFic{height:400px;}
.mapSpan{position: absolute;width: 90px;right: -95px;top: 0;}
::v-deep .el-select-dropdown__item{font-size: 12px;}
.right10{margin-left: 10px;}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7!important}
.borbtoonline{padding-bottom: 15px;position: relative;}
.borbtoonline::after{
content: "";
    position: absolute;
    left: -51px;
    bottom: 0;
    width: 111%;
    height: 1px;
    background: #f0f0f0;
}
.ellipsisDiv{    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap}
    .utc{width: 90%;}
</style>
